<template>
	<view class="bill">
		<view class="tabs">
			<view class="item" :class="{active:current==1 ? true : false}" @click="chooseClick(1)">
				<span>全部</span>
			</view>
			<view class="item" :class="{active:current==2 ? true : false}" @click="chooseClick(2)">
				<span>消费</span>
			</view>
			<view class="item" :class="{active:current==3 ? true : false}" @click="chooseClick(3)">
				<span>充值</span>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="index in 10" :key="index">
				<view class="left">
					<p>签到积分奖励</p>
					<p>2024-04-24</p>
				</view>
				<view class="right">
					<p>-20</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:1,
			}
		},
		onLoad(options) {
			if(options.type){
				this.current=options.type
			}else{
				this.current=1;
			}
		},
		methods: {
			chooseClick(type){
				this.current=type;
			}
		}
	}
</script>

<style lang="scss" scoped>
.bill{
	height:100vh;
	background-color:#f5f5f5;
}
.list{
	.item{
		background-color:#ffffff;
		display:flex;
		align-items:center;
		justify-content:space-between;
		border-bottom:1px solid #f0f0f0;
		padding:15px;
		.right{
			color:#16b4b9;
			font-weight:bold;
		}
	}
}
.tabs{
	display:flex;
	align-items:center;
	background-color:#ffffff;
	justify-content:space-between;
	border-bottom:1px solid #f0f0f0;
	.active{
		border-bottom:1px solid #ff0000;
		color:#ff0000;
	}
	.item{
		width:33.3%;
		text-align:center;
		padding:20px;
	}
}
</style>